<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <div class="wrapper-top" v-if="!isFlag">
        <svg class="icon" aria-hidden="true">
          <use :xlink:href="icon"></use>
        </svg>
      </div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: '',
  props: {
    isFlag: {
      type: Boolean,
      default: false
    }
  },
  // 变量
  data() {
    return {
      scroll: null,
      flag: false,
      isBottom: false,
      icon: '#icon-arrow-blue'
    }
  },
  // 方法
  methods: {
    // 事情做完，需要调用此方法告诉 better-scroll 数据已加载，否则上拉事件只会执行一次
    finishPullUp() {
      this.scroll && this.scroll.finishPullUp()
    },
    // 更新高度
    refresh() {
      this.scroll && this.scroll.refresh && this.scroll.refresh()
    },
    // 事情做完，需要调用此方法告诉 better-scroll 数据已加载，否则下拉事件只会执行一次
    finishPullDownRefresh() {
      this.scroll && this.scroll.finishPullDown()
    }
  },
  mounted() {
    let div = document.querySelector('.wrapper-top')
    this.scroll = BScroll(this.$refs.wrapper, {
      click: true, // 可以点击
      probeType: 3,
      pullUpLoad: true, // 上拉加载更多
      options: {
        scrollY: true
      },
      pullDownRefresh: { // 下拉刷新
        threshold: 60,
        stop: 0
      }
    })
    this.scroll.on('scroll', position => {
      position.y >= 60 ? this.icon = '#icon-arrow-bold-top' : this.icon = '#icon-arrow-blue'
      if(position.y <= 60 && position.y > 0) {
        div.style.opacity = position.y * 1/60
      }
    })
    this.scroll.on('pullingUp',()=>{
      this.$emit('pulling')
    })
    this.scroll.on('pullingDown',() => {
      div.style.opacity = 0
      this.$emit('pullDown')
    })
  }
}
</script>

<style scoped>
.wrapper-top {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
  width: 100%;
  opacity: 0;
}
.icon {
  width: 40px;
  height: 40px;
}
</style>
